種下關鍵字

某年 MOPCON 聽到一場關於 PixiJS 的議程

講者介紹到幾個使用 PixiJS 做的案例：

• 奔跑吧！台北 (像素風格的網頁遊戲)
• Google Doodle - 2018 萬聖節

『 恩，關鍵字：PixiJS 網頁遊戲 Google Doodle 』

萌芽

聽完議程的一年後，嘗試用 PixiJS 的 Sprite 做出角色在行走的動圖，同時也把過程記錄在 Blog 中

在動手做之前，搜尋資料的過程也是收穫滿滿

• 奔跑吧！台北

  • 是由簡訊設計所製作，參與的前端工程師有把程式幕後開發的過程分享在 Medium 上 (＊遊戲連結已失效）

• Google Doodle

  • 多虧那場議程才知道 Google 塗鴉的正確名稱
  • Google Doodles 有專屬的官網
  • 不只有互動遊戲，也有靜態的平面設計還有動畫
  • 每一個 Doodle 都有專屬的頁面介紹，例如：2023 的萬聖節，有放上設計師畫的草圖以及這個 Doodle 有發佈的地區，有的還會有這個 Doodle 的故事

後續

還有實作嗎？

在讀書會分享完 Pixi.JS 製作 Sprite 後，好一段時間沒有再碰遊戲相關的製作

直到再一個兩年過去，無意間在 daily.dev 看到 Kaboom.js 這套 Library，就選定它作為組內的分享的主題

＊Kaboom.js 已經在 2024/06 不再維護了，官方轉移至 KaPlay 這套 Library

關鍵字的延伸？

搜尋"簡訊設計" 發現它們官網有整理作品集做分類，有純平面、有動態也有網站，其中海龜點點名蠻厲害的，作品集的內容不只有放上連結，也有將網站源起、設計目的、UX 設計、創意亮點...等，通通寫在介紹中。

產生的效益

一場 PixiJS 的議程，讓我帶走 Pixi.JS 網頁遊戲 Google Doodle 這些關鍵字，除了投入實作學到的硬技能外

實際去搜尋這些相關作品或是資料，我學到

『 過程，過程是很值得紀錄下來的一件事 』

它可以包含：

• 設計理念
• 目的
• 初步規劃
• 工具的抉擇
• 面臨到的困難
• 任何在過程中閃過的、思考過的都可以

不管是 Google Doodle 、簡訊設計的作品集或是工程師自己的工作記錄，它們都有做這件事 —— 紀錄過程

紀錄過程，就是自學很好的方式！